<section class="gh-canvas gh-members-activity">
    <GhCanvasHeader class="gh-canvas-header">
        <div class="flex flex-column">
            {{#if this.userRecord}}
                <div class="gh-canvas-breadcrumb">
                    <LinkTo @route="settings">
                        Settings
                    </LinkTo>
                        {{svg-jar "arrow-right-small"}}
                        <LinkTo @route="settings.history" @query={{reset-query-params "settings.history"}} data-test-link="history-back">
                            History
                        </LinkTo>
                        {{svg-jar "arrow-right-small"}} User
                </div>
                <h2 class="gh-canvas-title" data-test-screen-title>
                    {{or this.userRecord.name this.userRecord.email}}
                </h2>
            {{else}}
                <div class="gh-canvas-breadcrumb">
                    <LinkTo @route="settings">
                        Settings
                    </LinkTo>
                        {{svg-jar "arrow-right-small"}} History
                </div>
                <h2 class="gh-canvas-title" data-test-screen-title>
                    History
                </h2>
            {{/if}}
        </div>
        <div class="view-actions">
            <Settings::History::EventFilter
                @excludedEvents={{this.excludedEvents}}
                @excludedResources={{this.excludedResources}}
                @onChange={{this.changeExcludedItems}} />

            <Settings::History::Search
                @selected={{this.userRecord}}
                @onChange={{this.changeUser}} />
        </div>
    </GhCanvasHeader>
    <div class="view-container">
        {{#let (history-event-fetcher filter=(history-event-filter excludedEvents=this.fullExcludedEvents excludedResources=this.fullExcludedResources user=this.user) pageSize=50) as |eventsFetcher|}}
            {{#if eventsFetcher.data}}
            <div class="gh-list-scrolling">
                <Settings::History::Table @events={{eventsFetcher.data}} />

                {{#if (not (or eventsFetcher.isLoading eventsFetcher.hasReachedEnd))}}
                    <GhScrollTrigger @enter={{eventsFetcher.loadNextPage}} @triggerOffset={{250}} />
                {{/if}}
            </div>
            {{else}}
                {{#unless eventsFetcher.isLoading}}
                    <Settings::History::NoEvents @filter={{or this.user this.excludedResources}} />
                {{/unless}}
            {{/if}}

            {{#if eventsFetcher.isLoading}}
                <div class="no-posts-box"><GhLoadingSpinner /></div>
            {{/if}}
        {{/let}}
    </div>
</section>

{{outlet}}
